<template>
  <!-- 任务反馈 -->
  <view class="index">
    <view class="confContent">
      任务详情：{{confContent}}
    </view>
    <view class="form">
      <!-- 基础表单校验:rules="rules" -->
      <uni-forms ref="valiForm" :modelValue="valiFormData">
        <uni-forms-item label="反馈内容" required name="feedBack" label-width='75px'>
          <uni-easyinput type="textarea" v-model="valiFormData.feedBack" placeholder="请输入反馈内容" />
        </uni-forms-item>
        <uni-forms-item label="图片" label-width='75px'>
          <uni-file-picker limit="9" :value="fileLists" title="上传图片" :image-styles="imgsty" :sourceType="sourceType"
            @select="select" @delete="del">
            <uni-icons type="images" size="30"></uni-icons>
            上传</uni-file-picker>
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
  import config from '@/config'
  import {
    getToken
  } from '@/utils/auth'
  import {
    listConference,
    getConference,
    delConference,
    addConference,
    updateConference,
    getRecord,
    getRecordName,
    updateRecord ,
    addRecord
  } from "@/api/system/conference";
  export default {
    data() {
      return {
        // 任务明细
        confContent: '',
        // 表单的校验规则
        rules: {
          // 反馈内容
          feedBack: {
            // name 字段的校验规则
            rules: [
              // 校验 name 不能为空
              {

                required: true,
                errorMessage: '请填写反馈内容',
              }
            ],
          }
        },
        // 表单数据
        valiFormData: {},
        // 上个页面传过来的参数
        type: '',
        // 上传组件的样式
        imgsty: {
          "height": 100, // 边框高度
          "width": 100, // 边框宽度
          "backgroundcolor": "#1cbbcc",
          "border": { // 如果为 Boolean 值，可以控制边框显示与否
            "color": "#5a5a5a", // 边框颜色
            "width": "2px", // 边框宽度
            "style": "solid", // 边框样式
            "radius": "5%",
            // 边框圆角，支持百分比
          }
        },
        // uni.chooseImage值，从相册选择，拍摄
        sourceType: ['album', 'camera'],
        // 上个页面传过来的参数
        type: '',
        // 图片回显
        fileLists: [],
        
      }
    },
    onReady() {
      this.getid()
      this.$refs.valiForm.setRules(this.rules)
    },
    onLoad(option){
      this.type=option.id
      // console.log(this.type)
    },
    methods: {
      /**
       *     pre   要添加的前缀
       *     paramsList   要加前缀的数组
       */
      addFirst(pre, paramsList) {
        let arr = [];
        for (let i = 0; i < paramsList.length; i++) {
          arr.push(pre + paramsList[i]);
        }
        return arr;
      },
      uploadFile(tempFilePaths) {
        let token = getToken();
        // 图片上传
        uni.uploadFile({
          url: config.baseUrl + `/common/upload`,
          filePath: tempFilePaths,
          name: 'file',
          method: 'POST',
          header: {
            authorization: 'Bearer ' + token
          },
          complete: (complete) => {
          				// console.log(complete);
          			},
          success: (uploadFileRes) => {
            // 提取图片url
            const res = JSON.parse(uploadFileRes.data);
            // console.log(res)
            if (res.code == 200) {
              let x = {}
              // 下面3个值是uni-app规定的一个不能少
              x.url = config.baseUrl+res.fileName
              x.extname = ''
              x.name = res.newFileName
              // str是自定义的数据，用来存放接口返回的地址，后面用来作为提交的参数
              x.str = res.fileName
              // console.log(x)
              // 没循环一次把结果加到数组里面
              this.fileLists.push(x)
              // console.log(this.fileLists)
              uni.showToast({
                title: '上传成功',
                icon: 'none'
              })
            }
          }
        });
      },
      select(e) {
        // console.log('选择文件：', e)
        for (var i = 0; i < e.tempFilePaths.length; i++) {
          this.uploadFile(e.tempFilePaths[i])
        }
      },
      // 删除图片事件
      del(e) {
        // console.log('删除图片', e);
        // 查找删除图片的地址和列表的值相同的索引号
        const num = this.fileLists.findIndex(item => item.url === e.tempFilePath);
        // console.log(num)
        //按照查出来的索引号，删除一张图片
        this.fileLists.splice(num, 1);
        // console.log(this.fileLists)
      },
      // 提交按钮
     async submit() {
        // console.log(this.valiFormData)
        this.$refs.valiForm.validate().then(async (res) => {
          const aa = this.fileLists.map(item => {
            return item.str
          })
          // console.log(aa)
          const img = aa.toString()
          // console.log(img)
          this.valiFormData.fileImg = img
        // }
        this.valiFormData.confNo = this.type
        this.valiFormData.feedBackStat = 4
        // console.log(this.valiFormData)
        const resp=await addRecord(this.valiFormData)
        // console.log(resp)
        // 当前任务的id（上个页面传过来的）
        // console.log(this.type)
        if(resp.code===200){
           uni.showToast({
        	title: '提交成功',
        	duration: 2000
        })
        setTimeout(() => {
        	uni.redirectTo({
        		url: '../../pagesA/task/task'
        	})
        },200)
        }
        }).catch((err) => {
        // 表单校验验失败，err 为具体错误信息
        // 其他逻辑处理
        // ...
        // console.log('失败')
        })
      }, 
      //获取当前的任务详情 
      async getid() {   
        const res = await getConference(this.type)
        this.confContent = res.data.confContent
      }
    }
  }
</script>

<style lang="less" scoped>
  .index {
    // background-color: white;
  }

  .form {
    width: 90%;
    margin: 10px auto;
    /* border: 1px red solid; */
  }

  .confContent {
    width: 90%;
    margin: 10px auto;
    // border: 1px black solid;
    padding: 20rpx;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  }
</style>